<template>
    <div class="three-box" id="three-box"></div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
const threeBox = ref();
import * as dat from 'dat.gui'

let { proxy } = getCurrentInstance();
let THREE = proxy.$THREE;

onMounted(() => {
    initThree();
});

const initThree = () => {
    const threeBox = document.getElementById("three-box");

    const scene = new THREE.Scene();
    const gui = new dat.GUI()

    const camera = new THREE.PerspectiveCamera(
        75,
        threeBox.clientWidth / threeBox.clientHeight,
        0.1,
        1000
    );


    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
    camera.position.set(0, 0, 0)
    camera.lookAt(0, 0, 0)
    threeBox.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry(1, 1, 1);

    const material = new THREE.MeshNormalMaterial();
    const cube = new THREE.Mesh(geometry, material);

    const orbitControls = new OrbitControls(camera,renderer.domElement) //鼠标交互、左键移动场景、滚轮放大缩小、右键平移

    scene.add(cube);

      const geometry2 = new THREE.SphereGeometry(1)

            const material2 = new THREE.MeshNormalMaterial({wireframe: true});
            const cube2 = new THREE.Mesh(geometry2, material2);
            cube2.position.y = 2
            cube2.position.x = -2
            scene.add(cube2);


    const geometry3 = new THREE.ConeGeometry(1, 1, 50);
    const material3 = new THREE.MeshNormalMaterial();
    const cone = new THREE.Mesh(geometry3, material3);
    cone.position.y = 2.5
    cone.position.x = 3
    scene.add(cone);

    const controls = {
        scaleNum: 0.1,
        r: 0.5,
        speed: 1,
        color: 0x00ff00,
        stop:()=>{
            if(controls.speed ===0){
                controls.speed = 1
            }else{
                controls.speed = 0
            }
            
        }
    }

    const sphere = new THREE.SphereGeometry(1.5)
    const material4 = new THREE.MeshBasicMaterial({color:controls.color});
    material4.wireframe = true
    const sphereMesh = new THREE.Mesh(sphere, material4);

    sphereMesh.position.x = -1
    sphereMesh.position.y = 1

 

    gui.add(material4,'wireframe')
    gui.add(controls, 'scaleNum', 0.1, 3,0.01).name('缩放倍数')
    gui.add(controls,'r',0,3).name('运动半径')
    gui.add(controls,'speed',0,2).name('运动速度')
    gui.add(controls,'stop')

    gui.addColor(controls,'color').onChange(()=>{
        material4.color.set(controls.color)
    })

    scene.add(sphereMesh);

    camera.position.z = 5;

    const clock = new THREE.Clock();
    function animate() {
        const time = clock.getElapsedTime();

        requestAnimationFrame(animate);
        sphereMesh.position.x = Math.sin(time*controls.speed)*controls.r;
        sphereMesh.position.y = Math.cos(time*controls.speed)*controls.r;


        sphereMesh.scale.x = controls.scaleNum; 
        sphereMesh.scale.y = controls.scaleNum; 
        sphereMesh.scale.z = controls.scaleNum; 

        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        // cube2.rotation.x += 0.01;
        // cube2.rotation.y += 0.01;

        cone.rotation.x += 0.01;
        cone.rotation.y += 0.01;

        orbitControls.update()

        renderer.render(scene, camera);
    }

    animate();
};
</script>

<style>
.three-box {
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    width: 100%;
}
</style>